<script setup>
import { ref, onMounted } from 'vue'
import { renderSingleBar, renderSingleLine } from '@/assets/js/chartUtils'
import {
    getDeviceCount,
    getAllAlarmData,
    getDayMonthAlarm,
    getDayMonthMessage,
    getAllMessageData,
} from '@/assets/api/api'
import { formatStamp } from '@/assets/js/utils'
import alarmLineChart from '@/components/alarmLineChart.vue'
// import { showLoading } from '@/assets/js/loading'
const noticeLine = ref(null)
const alarmBar = ref(null)
// 今日设备报警量
function getTodayAlarm() {
    const todayTime = [
        formatStamp(+new Date(), 'yyyy-MM-dd 00:00:00'),
        formatStamp(+new Date(), 'yyyy-MM-dd hh:ss:mm'),
    ]
    getAllAlarmData({
        type: '天',
        startTime: todayTime[0],
        endTime: todayTime[1],
    }).then((res) => {
        const chartData = res.data
        const xData = []
        const yData = []
        chartData.forEach((item) => {
            let time = Object.keys(item)[0]
            if (time.split('-').length < 2) {
                time = time + ':00'
            }
            const value = Object.values(item)[0]
            xData.push(time)
            yData.push(value)
        })
        renderSingleBar(alarmBar.value, {
            xData: xData,
            yData,
            yName: '设备报警量',
        })
    })
}
const todyAlarmCount = ref({})
function getDayMonthAlarmNum() {
    getDayMonthAlarm().then((res) => {
        todyAlarmCount.value = res.data
    })
}

// 今日设备消息量
function getTodayMessage() {
    getAllMessageData({
        type: '天',
        startTime: formatStamp(+new Date(), 'yyyy-MM-dd 00:00:00'),
        endTime: formatStamp(+new Date(), 'yyyy-MM-dd hh:ss:mm'),
    }).then((res) => {
        const chartData = res.data
        const xData = []
        const yData = []
        chartData.forEach((item) => {
            let time = Object.keys(item)[0]
            if (time.split('-').length < 2) {
                time = time + ':00'
            }
            const value = Object.values(item)[0]
            xData.push(time)
            yData.push(value)
        })
        renderSingleLine(noticeLine.value, {
            xData: xData,
            yData: yData,
            yName: '设备消息量',
        })
    })
}

const todyMessageCount = ref({})
function getDayMonthMessageNum() {
    getDayMonthMessage().then((res) => {
        todyMessageCount.value = res.data
    })
}

onMounted(() => {})
const deviceData = ref({})
const videoData = ref({})
function getData() {
    // showLoading()
    // 设备/通道数量
    getDeviceCount({}).then((res) => {
        deviceData.value = res.data
    })
    // 视频 设备/通道数量
    getDeviceCount({
        deviceClassify: 1,
        deviceClass: '1001',
    }).then((res) => {
        videoData.value = res.data
    })
    getTodayAlarm()
    getDayMonthAlarmNum()

    getDayMonthMessageNum()
    getTodayMessage()
}
getData()
// 告警统计
</script>
<template>
    <el-row :gutter="20">
        <el-col :span="6">
            <div class="dashboard-top-item white-box">
                <div class="top-item-content d-flex">
                    <div class="d-flex-1">
                        <h4>设备数量</h4>
                        <p class="num">{{ deviceData.all_count }}</p>
                    </div>
                    <img class="icon" src="@/assets/images/icon-device.png" />
                </div>
                <div class="top-item-footer d-flex">
                    <div class="value-item">
                        <span class="dot success mr-5"></span>
                        <span class="d-flex-1">在线数量:</span>
                        <b>{{ deviceData['on-line'] }}</b>
                    </div>
                    <div class="value-item">
                        <span class="dot danger mr-5"></span>
                        <span class="d-flex-1">离线数量:</span>
                        <b>{{ deviceData['off-line'] }}</b>
                    </div>
                </div>
            </div>
        </el-col>
        <el-col :span="6">
            <div class="dashboard-top-item white-box">
                <div class="top-item-content d-flex">
                    <div class="d-flex-1">
                        <h4>通道数量</h4>
                        <p class="num">{{ videoData.all_count }}</p>
                    </div>
                    <img class="icon" src="@/assets/images/icon-channel.png" />
                </div>
                <div class="top-item-footer d-flex">
                    <div class="value-item">
                        <span class="dot success mr-5"></span>
                        <span class="d-flex-1">在线数量:</span>
                        <b>{{ videoData['on-line'] }}</b>
                    </div>
                    <div class="value-item">
                        <span class="dot danger mr-5"></span>
                        <span class="d-flex-1">离线数量:</span>
                        <b>{{ videoData['off-line'] }}</b>
                    </div>
                </div>
            </div>
        </el-col>
        <el-col :span="6">
            <div class="dashboard-top-item white-box">
                <div class="top-item-content d-flex">
                    <div class="d-flex-1">
                        <h4>今日设备报警量</h4>
                        <p class="num">
                            {{ todyAlarmCount.dayAlarmCount || '0' }}
                        </p>
                    </div>
                    <div class="small-chart" ref="alarmBar"></div>
                </div>
                <div class="top-item-footer d-flex">
                    <div class="value-item mx-0">
                        <span class="d-flex-1">当月设备报警量:</span>
                        <b>{{ todyAlarmCount.monthAlarmCount || '0' }}</b>
                    </div>
                </div>
            </div>
        </el-col>
        <el-col :span="6">
            <div class="dashboard-top-item white-box">
                <div class="top-item-content d-flex">
                    <div class="d-flex-1">
                        <h4>今日设备消息量</h4>
                        <p class="num">
                            {{ todyMessageCount.dayCount || '0' }}
                        </p>
                    </div>
                    <div class="small-chart" ref="noticeLine"></div>
                </div>
                <div class="top-item-footer d-flex">
                    <div class="value-item mx-0">
                        <span class="d-flex-1">当月设备消息量:</span>
                        <b>{{ todyMessageCount.monthCount || '0' }}</b>
                    </div>
                </div>
            </div>
        </el-col>
    </el-row>
    <div class="white-box mt-20 d-flex-1">
        <alarmLineChart title="设备消息" type="message"></alarmLineChart>
    </div>
</template>
<style lang="scss" scoped>
.chart-wrap {
    height: 500px;
}
</style>
